<template>
  <el-card>
     
    <div slot="header" class="clearfix">
    <span>区域列表</span>    
  </div>
    <el-table
      :data="cityData"
      border
      style="width: 100%"
      v-loading="loading"
      :header-cell-style="{background:'#F3F4F7',color:'#555',fontSize:'16px'}"
    >
      <el-table-column fixed prop="cityId" label="城市Id" width align="center"></el-table-column>
      <el-table-column fixed prop="areaId" label="区域Id" width align="center"></el-table-column>
      <el-table-column prop="cityName" label="城市名称" width align="center"></el-table-column>
      <el-table-column prop="name" label="区域名称" width align="center"></el-table-column>     
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="handleClick(scope)"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope)"></el-button>
          <!-- <router-link :to="`/city/edit/${scope.row.cityId}`">编辑</router-link> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
        :hide-on-single-page="value"
      ></el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  methods: {
    //编辑的方法
    edit(scope) {
   
      let areaId = scope.row.areaId;   
      this.$router.push(`/area/edit/${areaId}`);     
    },
    //表格的操作方法
    handleClick(scope) {    
      this.$confirm(`您将删除${scope.row.name}, 是否继续?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          const data = {
            cityId: scope.row.cityId
          };
          const url = "/city/delById";
          this.$axios.post(url, data).then(res => {});

          this.cityData.splice(scope.$index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //分页方法
    changePage(pageNum) {     
      this.getData(pageNum);
    },

    // 获取数据的方法
    getData(pageNum) {
      const url = "/area/getList?pageNum=" + pageNum;
      this.loading = true;
      this.$axios
        .get(url)
        .then(res => {        
          this.cityData = res.areas;          
          this.total = res.total;         
          this.loading = false;
        })
        .catch(err => {         
          this.loading = false;
        });
    },
    
  },
  created() {
    this.getData();
  },

  data() {
    return {
      cityData: [],
      total: 0,
      cityData: [],
      pageNum: 1,
      index: 0,
      loading: false,
      value: true
    };
  }
};
</script>
<style lang="less" scoped>
.clearfix{
  font-size: 22px;
  font-weight: 900;
}
.pages {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 8px;
}
</style>